<template>
  <div id="alarmStatistics"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    // this.setEcharts();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表、
    setEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("alarmStatistics")
      );
      // 计划产值
      var zzx1 = [27, 38, 41, 21, 27];

      var mid =
        "";
      var top =
        "";
      var bottom =
        "";
      var bottom1 =
        "";

      var data = [
        { x: "Sun", value: 22 },
        { x: "Mon", value: 18 },
        { x: "Tue", value: 19 },
        { x: "Wed", value: 23 },
        { x: "Thu", value: 29 },
      ];

      var x = [];
      var y = [];
      var imgList = [];

      data.forEach((item, index) => {
        x.push(item.x);
        y.push(item.value);
        imgList.push(
          {
            coord: [index, item.value],
            symbolSize: [55, 40],
            symbolOffset: ["25%", 0],
            symbol: "image://" + top,
            value: item.value,
            label: {
              show: true,
              offset: [0, -40],
              fontSize: 40,
              fontWeight: "700",
              color: "#fff",
              formatter: function (params) {
                return params.value;
                // return params.value + "%";
              },
            },
          },
          {
            coord: [index, 0],
            symbolOffset: ["25%", 8.37],
            symbolSize: [56, 17],
            symbol: "image://" + bottom,
            itemStyle: {
              opacity: 0.8,
            },
          },
          {
            coord: [index, 0],
            symbolOffset: ["22%", 0],
            symbolSize: [60, 33],
            symbol: "image://" + bottom1,
            itemStyle: {
              opacity: 0.8,
            },
          }
        );
      });

      var option = {
        grid: {
          top: "10%",
          left: "0%",
          bottom: "5%",
          right: "13%",
          containLabel: true,
        },
        xAxis: {
          offset: 20,
          data: x,
          axisLabel: {
            // color: "#fff",
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#fff", // x轴颜色
              fontWeight: "normal",
              fontSize: 38,
              // lineHeight: 22,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          name: "单位：日",
          nameTextStyle: {
            color: "#fff",
            fontSize: 40,
          },
        },
        yAxis: {
          show: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 40,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            z: 1,
            type: "bar",
            barWidth: 27.5,
            symbolOffset: [0, -8],
            data: y,
            offset: 10,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(0, 79, 197, 1)" },
                    { offset: 1, color: "rgba(0, 79, 197, 0)" },
                  ],
                },
                opacity: 0.8,
              },
            },
            markPoint: {
              data: imgList,
            },
          },
          {
            z: 1,
            type: "bar",
            barWidth: 27.5,
            barGap: "-2%",
            symbolOffset: [0, -8],
            data: y,
            offset: 10,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: "rgba(0, 154, 255, 1)" },
                    { offset: 1, color: "rgba(0, 154, 255, 0)" },
                  ],
                },
                opacity: 0.8,
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>
<style scoped lang="less">
#alarmStatistics {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
  // background: url(../../assets/方框底图.png) 0 0 no-repeat;
  // background-size:100% 100%;
}
</style>
